<template>
	<div class="m-content-box add-role">
		<div class="btn-top-group">

			<router-link :to="'/system/memberRBAC'">
				<el-button type="primary">返回</el-button>
			</router-link>
		</div>
		<div id="dataForm" class="normal-content role-detail-box">
			<div class="step-box js-step-1">
				<div class="flex-edit-box">
					<div class="base-title">角色详情</div>
					<div class="field-box clear">
						<label class="fl label first_name"><span style="color:red;">*</span> 角色名称</label>
						<span class="fr role_name">{{ ruleForm.title }}</span>
					</div>
					<div class="field-box clear">
						<label class="fl label">角色属性</label>
						<span class="fr role_code">{{ ruleForm.brief }}</span>
					</div>
					<div class="field-box clear">
						<label class="fl label">备注</label>
						<div class="fr set-desc_normal multi-line-text role_remark" />
					</div>

					<div class="flex-edit-box mt-30">
						<div class="base-title">角色权限</div>
						<!-- 权限列表 -->
						<!--            <div class="field-box">-->
						<!--              <span style="color:red;">*</span>-->
						<!--              全部选择-->
						<!--            </div>-->
						<div class="m-checkbox-boxs field-box" style="padding: 20px 0px">
							<el-tree ref="tree" style="background: #f2f2f2" :data="data" show-checkbox node-key="id"
								:default-expand-all="true" :props="defaultProps" />
						</div>
						<!-- /权限列表 -->
					</div>
					<div class="field-box">
						<div class="item">
							说明：查看品牌信息、场馆信息、查看员工，课表信息、查看教室为基础权限，不可编辑
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		details,
		grouplist
	} from '@/api/group'
	import {
		RoleList
	} from '@/api/brand' // Secondary package based on el-pagination

	export default {
		name: 'ArticleList',
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				ruleForm: {
					title: '',
					// 角色属性
					attrs: 1,
					notes: '',
					rulelist: ''
				},
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				list: null,
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 20
				},
				status: {},
				role: {},
				roleIndex: '',
				statusIndex: 0,
				data: []
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			this.id = this.$route.query.id
			var xuanList = [{
				name: '角色详情',
				url: '/system/roleDetail',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.detail()
			this.getdata()
		},
		methods: {

			getCurrentNode(nodeObj, nodeState) {
				// 获取选中的节点数据
				console.log(nodeObj)
			},
			savedata() {
				console.log(this.ruleForm)
			},
			getdata() {
				this.listLoading = true
				const params = {
					'des': 1
				}
				RoleList(params).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.data = data

					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			detail() {
				details({
					'id': this.id
				}).then(response => {
					const {
						data
					} = response
					console.log(response)
					if (response.code == 0) {
						this.ruleForm = response.data
						this.$refs.tree.setCheckedKeys(response.data.rulelist.split(','))
					}
				}).catch(error => {
					console.log(error)
					this.loading = false
				})
			},
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			}
		}
	}
</script>

<style scoped>
	.m-content-box {
		position: relative;
		padding: 30px 63px;
		font-size: 14px
	}

	.add-role .btn-top-group {
		position: absolute;
		right: 63px;
		top: 8px;
		height: 34px;
	}

	.normal-content {
		position: relative;
		width: 840px;
		margin: 0 auto;
	}

	.flex-edit-box {
		position: relative;
	}

	.flex-edit-box .base-title {
		height: 22px;
		font-size: 12px;
		color: #787878;
	}

	.role-detail-box .field-box {
		background: #f2f2f2;
		line-height: 44px;
	}

	.role-detail-box .field-box {
		margin-bottom: 2px;
		padding: 0 20px;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		//line-height: 32px;
	}

	.clear {
		zoom: 1;
	}

	.flex-edit-box {
		position: relative;
	}

	.mt-30 {
		margin-top: 30px;
	}

	.role-detail-box .first_name {
		margin: 0 -12px !important;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	/deep/ .el-tree-node__label {
		font-size: 16px !important;

	}

	/deep/ .el-tree-node__content {
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 30px;
		cursor: pointer;
		margin-bottom: 10px;
	}

	/deep/ .el-checkbox__inner {
		display: inline-block;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 20px;
		height: 20px;
		background-color: #FFFFFF;
		z-index: 1;
		-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
		transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
	}

	/deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
		-webkit-transform: rotate(45deg) scaleY(1);
		transform: rotate(45deg) scaleY(1);
		margin-left: 3px;
		margin-top: 3px;
	}
</style>